<template>
  <div>
    <el-button class="button" type="primary" @click="handleSaveAndRun"
      >保存并运行</el-button
    >
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(router, idx) in routers"
        :key="idx"
        :title="router.name"
        :name="router.name"
      >
        <!-- port -->
        <el-card class="box-card" shadow="always">
          <template #header>
            <div>
              <span class="card-header">端口配置</span>
            </div>
          </template>
          <div v-for="(port, iidx) in router.port" :key="iidx">
            <template
              v-for="(p, iiidx) in Object.entries(port)"
              :key="`${iidx}-${iiidx}`"
            >
              <el-row v-if="p[0] !== 'up'">
                <el-col :span="5">{{ portMap.get(p[0]) || p[0] }}：</el-col>
                <el-col :span="19">
                  <el-input
                    class="property-input"
                    v-model="portConfig[idx][iidx][p[0]]"
                    :placeholder="p[1]"
                  ></el-input>
                </el-col>
              </el-row>
              <el-row v-else>
                <el-col :span="5">当前状态：</el-col>
                <el-col :span="19">
                  <el-switch
                    v-model="portConfig[idx][iidx][p[0]]"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  />
                </el-col>
              </el-row>
            </template>
            <el-divider v-if="idx !== router.length - 1"></el-divider>
          </div>
        </el-card>

        <!-- command -->
        <el-card class="box-card" shadow="always">
          <template #header>
            <div>
              <span class="card-header">命令配置</span>
            </div>
          </template>
          <div>
            <el-input
              v-model="commandConfig[idx]"
              autosize
              type="textarea"
              :placeholder="router.command"
            />
          </div>
        </el-card>

        <!-- link -->
      </el-collapse-item>
      <el-collapse-item title="连接情况">
        <div v-for="(l, idx) in line" :key="idx">
          {{ l.from.join(" ") }} --- {{ l.to.join(" ") }}
          <el-switch
            v-model="l.logicalConnected"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- </el-card> -->
  </div>
</template>

<script>
import { saveAndRun } from "../util/common";
import bus from "../util/bus";

export default {
  name: "JsonForm",
  props: ['chosenMachine'],
  computed: {
    config() {
      return this.$store.state.config;
    },
    routers() {
      return this.$store.state.config.router;
    },
    line() {
      return this.$store.state.config.line;
    },
    portConfig() {
      return this.$store.state.config.router.map((p) => p.port);
    },
    commandConfig() {
      return this.$store.state.config.router.map((p) => p.command.join("\n"));
    },
  },
  watch: {
    chosenMachine(newVal, oldVal) {
      this.activeNames = newVal;
    }
  },
  data() {
    return {
      configArr: [],
      portMap: new Map(),
      activeNames: this.chosenMachine
    };
  },
  mounted() {
    this.initPortMap();
  },

  methods: {
    initPortMap() {
      this.portMap.set("name", "端口");
      this.portMap.set("ip", "ip");
      this.portMap.set("mask", "子网掩码");
      this.portMap.set("network", "网络");
    },

    async handleSaveAndRun() {
      const { id, results } = await saveAndRun(this.config);
      this.$store.commit("newConfig", JSON.parse(this.config));
      this.$store.commit("newConfigId", id);
      bus.$emit('changeJson');
    },
  },
};
</script>

<style scoped>
.property-input {
  width: 300px;
}

.box-card {
  margin-bottom: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}
</style>
